<%--
  Created by IntelliJ IDEA.
  User: 86132
  Date: 2022/11/2
  Time: 21:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%= basePath%>">
    <script src="js/jquery-3.6.0.min.js"></script>
    <title>home</title>
</head>
<script type="text/javascript">
    $(function (){
        //  给发送添加绑定事件
        $("#submitTalkDiv").click(function (){
            var talkContent=$("#talkTextDiv").html()
            //  表单验证
            if (talkContent == ""){
                alert("高低整两句!")
                return
            }
            $.ajax({
              url : "workbench/main/addTalk.do",
              type : "POST",
              dataType : "json",
              data : {
                talkContent : talkContent
              },
              success : function (resp){
                if (resp.code == 1){
                  //刷新页面,跳转到首页
                  window.location.href="workbench/main/home.do"
                }else {
                  alert("系统繁忙,请稍候...")
                }
              }
            })
        })

    //    页面加载完毕,就加载我的说说 以及我的好友的说说
        $.ajax({
            url : "workbench/main/queryAllTalkByUserId.do",
            dataType : "json",
            type : "GET",
            success : function (talkList){
                let divText=""
                $.each(talkList,function (i,talk){
                    let divRemark=""
                    divText+="<div class='totalDiv'><div class='talkMainDiv'><div class='talkNameClass'>"+talk.talkName+"</div><div class='timeCreateClass'>"+talk.timeCreate+"</div><div class='talkContentClass'>"+talk.talkContent+"</div><div class='talkRemarkClass' contenteditable='true'></div> <button value='"+talk.talkId+"' class='submitTalkRemarkBtn'>评论</button></div>"
                    $.each(talk.talkRemarkList,function (i,talkRemark){
                        divRemark+="<div class='talkRemark'><div class='remarkUserName'>"+talkRemark.user.userName+"</div><div class='timeRemark'>"+talkRemark.timeRemark+"</div> <div class='remarkContent'>"+talkRemark.remarkContent+"</div></div>"
                    })
                    divText+=divRemark
                    divText+="</div>"
                })
                $("#homeTalkDiv").append(divText)
            }
        })
    })
</script>
<style>
    body{
        padding: 0;
        margin: 0;

    }
    #homeTopDiv{
        height: 20%;
    }
    #homeTalkDiv{
        height: 80%;
        overflow-y: scroll;
    }
    #homeTalkDiv::-webkit-scrollbar{
        display: none;
    }
    #talkTextDiv{
        margin-left: 20%;
        height: 100px;
        width: 60%;
        top: 20px;
        position: relative;
        position: relative;
        border-style: solid;
        border-width: 1px;
        outline: none;
        display: inline-block;
        overflow-y: hidden;
    }
    #submitTalkDiv{
        height: 30px;
        width: 40px;
        position: absolute;
        margin-left: 5px;
        top: 90px;
        border-style: solid;
        border-width: 1px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        display: inline-block;
    }
    .talkMainDiv{
        margin-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        word-break: break-word;
        overflow-y: scroll;
        height: 195px;
    }
    .talkMainDiv::-webkit-scrollbar{
        display: none;
    }
    .talkNameClass{
        width: fit-content;
        display: inline-block;
    }
    .timeCreateClass{
        width: fit-content;
        color: grey;
        font-size: 5px;
    }
    .talkContentClass{
        margin-top: 5px;
        height: 100px;
        overflow-y: scroll;
    }
    .talkContentClass::-webkit-scrollbar{
        display: none;
    }
    .totalDiv{
        margin-left: 20%;
        margin-right: 20%;
        margin-bottom: 15px;
        padding-left: 10px;
        padding-right: 10px;
        background: peachpuff;
    }
    .talkRemarkClass{
        position: relative;
        border-style: solid;
        border-width: 1px;
        height: 30px;
        overflow-y: scroll;
    }
    .talkRemarkClass::-webkit-scrollbar{
        display: none;
    }
    .submitTalkRemarkBtn{
        width: fit-content;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 10px;
        cursor: pointer;
        margin-left: 526px;
        /*margin-left: 130px;*/
        position: relative;
        background: none;
        border-width: 1px;
    }
    .talkRemark{
        background: gainsboro;
        position: relative;
        bottom: 1px;
        height: fit-content;
        padding-left: 10px;
    }
    .remarkUserName{
        width: fit-content;
        display: inline-block;
        height: 25px;
    }
    .timeRemark{
        width: fit-content;
        color: grey;
        font-size: 5px;
        display: inline-block;
        margin-left: 10px;
    }
    .remarkContent{
        width: 100%;
        word-wrap: break-word;
        margin-bottom: 10px;
    }
</style>
<body>
<div id="homeTopDiv">
    <div id="talkTextDiv" contenteditable="true"></div>
    <div id="submitTalkDiv">发布</div>
</div>
<div id="homeTalkDiv">
<%--
        <div class='totalDiv'>
            <div class='talkMainDiv'>
                <div class='talkNameClass'>'+talk.user.userName+'</div><input type='checkbox' class='deleteTalkClass'>"+talk.talkId+"</input>
                <div class='timeCreateClass'>"+talk.timeCreate+"</div>
                <div class='talkContentClass'>"+talk.talkContent+"</div>
                <div class='talkRemarkClass' contenteditable='true'></div>
                <button class='submitTalkRemarkBtn'>评论</button>
            </div>
            <div class='talkRemark'>
                <div class='remarkUserName'>"+talkRemark.user.userName+"</div><div class='timeRemark'>"+talkRemark.timeRemark+"</div>
                <div class='remarkContent'>"+talkRemark.remarkContent+"</div>
            </div>
        </div>
--%>
</div>
</body>
</html>
